<template>
    <div class='everyday'>
        <van-nav-bar
        left-text="每日推荐"
        right-text="更多"
        left-arrow
        @click-left="onClickLeft"
    />
        <div class="box">
            <div class="cont" v-for="item in dailySongs" :key="item.id" >
                <img :src="item.al.picUrl" alt="">
                <div class="song">
                    <p class="name">{{item.name}}</p>
                    <span class="singer" v-for="s in item.ar" :key="s.id">{{s.name}} </span>
                </div>   
            </div>
        </div>
    </div>
</template>                         
                        
                    
                
            
            

<script>
import axios from "axios";
export default {
    
    data() {
        
        return {
            dailySongs:[],
        };
    },
    computed: {},
    watch: {},
    
    methods: {
        onClickLeft(){
            this.$router.go("-1")
        },
        
      
    },
    created() {
    
        //每日推荐歌曲
        axios.get(`http://localhost:3000/recommend/songs`,{
             withCredentials: true, //cookie跨域
        }).then((res)=>{
            
            console.log(res)
            this.dailySongs= res.data.data.dailySongs
        })
    },
    mounted() {
        
    },
    components: {},
    }
</script>
<style scoped>
.cont {
  border-top: 1px solid #ccc;

  width: 330px;
  height: 42px;
  padding: 15px 0;
  display: flex;
  margin: 0 15px;
}
.cont img{
  margin-right: 10px;
  width: 50px;
  height: 50px;
  border: 1px solid #000;
  border-radius: 10px;
}
.song {
  width: 264px;
}
.name {
  font-weight: bold;
  font-size: 15px;
  margin: 0 0 5px;
}
/* .msg {
  font-weight: 100;
  font-size: 13px;
}
.play {
  width: 66px;
  display: flex;
  align-items: center;
  justify-content: center;
} */
</style>